<template>
    <div class="partAlbumIndex">
      <Aside></Aside>
      <Header :title="title" @toggleMenu="toggleMenu" @navToBack="navToBack"></Header>
      <div class="albumContent">
        <div class="albumList" v-for="(item,index) in albumList">
          <router-link :to="{name:'albumDetail',query:{id:item.id}}">
          <p class="albumTitle">
            <a >{{item.name}}</a>
          </p>
          <p class="albumTime">
            <span>{{item.ctime}}</span>
          </p>
          <div class="albumImg clearfix">
            <div class="left">
              <img :src=item.path[0] alt="" onerror="this.onerror=null; this.src='../../static/images/codeCover2.jpg'">
            </div>
            <div class="right">
              <p>
                <img :src=item.path[1] alt="" onerror="this.onerror=null; this.src='../../static/images/codeCover2.jpg'">
              </p>
              <p>
                <img :src=item.path[2] alt="" onerror="this.onerror=null; this.src='../../static/images/codeCover2.jpg'">
                  <a><span>更多</span></a>
              </p>
            </div>
          </div>
          </router-link>
        </div>
        <!--加载更多-->
        <div class="loadComponent">
          <div class="weui-loadmore weui-loadmoreIng" v-if="loadmoreClick">
            <i class="weui-loading"></i>
            <span class="weui-loadmore__tips" >正在加载</span>
          </div>
          <div class="weui-loadmore weui-loadmore_line" v-if="nomoreData">
            <span class="weui-loadmore__tips">到底了</span>
          </div>
          <div class="loadMore"   @click.stop="loadMore" v-if="moreData">
            更多
          </div>
        </div>
      </div>
    </div>
</template>
<script>
  import aside from '../../components/aside.vue'
  import header from '../../components/header.vue'
  export default({
    data (){
        return{
          title:'党建相册',
          defaultPage:1,
          albumList:[],
          nomoreData:false,
          loadmoreClick:false,
          moreData:true,
        }
    },
    components:{
      Aside:aside,
      Header:header
    },
    methods:{
      loadMore (){

        this.loadmoreClick =!this.loadmoreClick
        this.moreData =false
//        console.log(this.moreData)
        this.defaultPage ++
        this.init(this.defaultPage)
      },
      navToBack(){
        this.$router.go(-1);//返回上一层
      },
      choiseffclTab (index){
        this.defaultIndex =index
      },
      toggleMenu(){
        $('.aside').toggleClass('active')
        $('body').toggleClass('active')
        if($('.aside').hasClass('active')){
          $('#toggleBtn').find('.img2').hide()
          $('#toggleBtn').find('.img1').show()
        }else{
          $('#toggleBtn').find('.img1').hide()
          $('#toggleBtn').find('.img2').show()
        }
      },
      init(page){
          this.axios('/home/Photo/getPhotoList?'+`${this.baseUrl}`,{
              params:{
                  p:page
              }
          })
            .then((res)=>{
//              console.log(res.data.data)
              if(res.data.data.length==0){

                this.nomoreData =true
                this.moreData =false
                this.loadmoreClick =false
              }else{
                this.nomoreData =false
                this.moreData =true
                this.loadmoreClick =false
              }
              this.albumList.push(...res.data.data)
            })
            .catch((res)=>{
              this.nomoreData =true
              this.moreData =false
              this.loadmoreClick =false
            })
      }
    },
    mounted (){
      $('body').removeClass('active')
      var clientWidth =document.documentElement.clientWidth
      if(clientWidth>=750){
        clientWidth =$('body').width()
      }
      this.init(this.defaultPage)
    }
  })
</script>
<style scoped>
  .albumContent{
    padding:  0 0.32rem;
    margin-top: 0.8rem;
  }
  .albumList{
    padding-top: 0.3rem;
    padding-bottom: 0.26rem;
  }
  .albumTitle{
    padding-bottom: 0.1rem;
  }
  .albumTitle a{
    font-size: 0.32rem;
    color: #333333;
    font-weight: bold;
  }
  .albumTime {
    font-size: 0.26rem;
    color: #999999;
  }
  .albumTime  span{
    margin-right: 0.3rem;
  }
  .albumImg{
    height:2.7rem ;
    margin-top: 0.2rem;
  }
  .albumImg .left{
    width: 4.25rem;
    height: 2.67rem;
  }
  .albumImg .left img{
    width: 100%;
    height: 100%;
  }
  .albumImg .right{
    width: 2.5rem;
    height: 100%;
  }
  .albumImg .right img{
    width: 2.5rem;
  }
  .albumImg .right p:nth-child(1) img{
    display: inline-block;
    max-width:100% ;
    vertical-align: top;
    height: 1.3rem;
    margin-bottom: 0.1rem;
  }
  .albumImg .right p:nth-child(2) img{
    max-width:100% ;
    vertical-align: bottom;
    height: 1.3rem;
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -o-filter: blur(2px);
    -ms-filter: blur(2px);
    filter: blur(2px);
  }
  .albumImg .right p{
    position: relative;
  }
  .albumImg .right p span{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    /*background: rgba(255,255,255,0.8);*/
    font-size: 0.32rem;
    color: white;
    font-weight: bold;
    text-align: center;
    line-height: 1.3rem;

  }
</style>
